<!DOCTYPE html>
<html lang="en">

<!------------------------------页头部分------------------------------>
<head>
    <meta charset="UTF-8">
    <!--标题-->
    <title>my-user</title>
    <!--引入layui样式-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <!--样式-->
    <style>
        /*主体*/
        .my-user-body {
            display: flex;
            justify-content: center;
        }

        /*表格主体*/
        .my-user-table-body {
            width: 80%;
            margin-top: 36px;
        }

        /*表单项*/
        .my-user-form-item {
            margin: 30px;
        }
    </style>
</head>

<!------------------------------页面部分------------------------------>
<body>
<!--主体-->
<div class="my-user-body">
    <!--表格主体-->
    <div class="my-user-table-body">
        <!--表格-->
        <table id="table"></table>
    </div>
</div>
</body>

<!------------------------------js部分------------------------------>
<!--引入layui-js-->
<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
<!--表格工具栏-->
<script id="table-toolbar" type="text/html">
    <!--按钮容器-->
    <div class="layui-btn-container">
        <!--添加按钮-->
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>添加
        </button>
        <!--刷新按钮-->
        <button class="layui-btn layui-bg-blue layui-btn-sm layui-btn-radius" lay-event="refresh">
            <i class="layui-icon layui-icon-refresh"></i>刷新
        </button>
    </div>
</script>
<!--表格项工具栏-->
<script id="table-item-toolbar" type="text/html">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--表格弹窗-->
<script id="tableDialog" type="text/html">
    <!--表单-->
    <form id="form" lay-filter="form" class="layui-form layui-form-pane">
        <!--用户名-->
        <div class="layui-form-item my-user-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <label>
                    <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
                </label>
            </div>
        </div>
        <!--用户名-->
        <div class="layui-form-item my-user-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <label>
                    <input type="text" name="password" placeholder="请输入密码" class="layui-input">
                </label>
            </div>
        </div>
    </form>
</script>
<!--js-->
<script type="text/javascript">
    <!--layui-use-->
    layui.use(['layer', 'form', 'table'], () => {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        //渲染表格
        const tableItem = table.render({
            skin: 'row',//线
            even: true,//斑马纹
            elem: '#table',//元素id
            method: "get",//请求类型
            url: 'http://localhost:8081/myUser/getMyUser',//请求地址
            cellMinWidth: 120,//最短宽度
            parseData(res) {
                //返回值格式化
                return {
                    "code": 0,
                    "data": res
                };
            },
            toolbar: '#table-toolbar',//工具栏
            ///表头
            cols: [
                [
                    {type: "checkbox", fixed: "left"},
                    {field: 'id', title: '数据id'},
                    {field: 'username', title: '用户名'},
                    {field: 'password', title: '密码'},
                    {title: '操作', toolbar: '#table-item-toolbar'}
                ]
            ]
        });
        //监听表格工具栏
        table.on('toolbar(table)', obj => {
            //添加
            if (obj.event === 'add') showTableDialog();
            //刷新
            if (obj.event === 'refresh') tableItem.reload();
        });
        //监听表格工具
        table.on('tool(table)', obj => {
            //修改
            if (obj.event === 'edit') showTableDialog(obj.data);
            //删除
            else if (obj.event === 'del') del(obj.data.id);
        });
        //显示表格弹窗
        const showTableDialog = (data) => {
            //弹窗
            let tableDialog = layer.open({
                type: 1,//弹窗类型
                skin: 'layui-layer-win10',//风格
                shade: [0.5, '#f5f5f5'],//遮罩透明度
                maxmin: true,//最大最小化按钮
                shadeClose: true, //点击遮罩区域，关闭弹层
                isOutAnim: true,//动画
                anim: 'slideDown', //动画方式
                title: data ? '修改' : '添加',//标题
                content: $('#tableDialog').html(),//内容
                btn: ['确定', '取消'],
                //弹窗成功回调
                success: () => {
                    //如为修改,回显表单数据
                    if (data) form.val('form', data);
                },
                //确定按钮回调
                btn1: () => {
                    //表单提交
                    form.submit('form', value => {
                        //如为修改,回填id
                        if (data) value.field.id = data.id
                        //加载中
                        const load = layer.load(2);
                        $.ajax({
                            type: 'post',//请求类型
                            //请求地址,如为修改使用修改地址,否则使用新增地址
                            url: data ? 'http://localhost:8081/myUser/editMyUser' : 'http://localhost:8081/myUser/addMyUser',
                            contentType: 'application/json;charset=UTF-8',//数据类型
                            data: JSON.stringify(value.field),//数据
                            success: function (res) {
                                if (res) {
                                    //加载完成关闭弹窗
                                    layer.close(load);
                                    layer.close(tableDialog)
                                    //刷新表格
                                    tableItem.reload();
                                } else layer.msg(data ? '修改' : '添加' + '失败', {icon: 2});
                            }
                        });
                    })
                },
            });
        }
        //删除
        const del = (id) => {
            //加载中
            const load = layer.load(2);
            $.ajax({
                type: 'get',//请求类型
                url: 'http://localhost:8081/myUser/delMyUser',//请求地址
                data: {id},//数据
                success: function (res) {
                    if (res) {
                        //加载完成关闭弹窗
                        layer.close(load);
                        //刷新表格
                        tableItem.reload();
                    } else layer.msg('删除失败', {icon: 2});
                }
            });
        }
    })
</script>
</html>